<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            width: 500px;
            height: 300px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!-- 画图 -->
    <canvas></canvas>
    <script>
        var canvas = document.querySelector("canvas");

        
        // 获取一个绘画环境对象
        var can = canvas.getContext("2d");

        // 画板比例
        can.scale(0.6,0.5);


        // can.lineTo(10,10); //端点
        // can.lineTo(100,10);//端点
        // can.strokeStyle = "red"; //描边颜色
        // can.lineWidth = "2px"; //描边宽度
        // can.stroke(); //描边

        // // 绘制一个新的图形
        // // can.beginPath();
        // can.moveTo(100,100);//端点  //绘制一个新的端点
        // can.lineTo(10,10);//端点
        // can.strokeStyle = "red"; //描边颜色
        // can.lineWidth = "2px"; //描边宽度
        // can.stroke(); //描边

        // can.fillStyle = "pink"; //填充颜色
        // can.fill();  //填充

        // can.beginPath(); // 绘制一个新的图形
        // can.lineTo(20,20); //开始端点
        // // 画曲线
        // // 参数:x1,y1,x2,y2;
        // // x1,y1控制点
        // // x2,y2;结束点
        // can.quadraticCurveTo(100,100,200,20);
        // can.strokeStyle = "red"; //描边颜色
        // can.lineWidth = "2px"; //描边宽度
        // can.stroke(); //描边


        // can.beginPath(); 
        // // 画矩形
        // // 参数:x,y,w,h
        // // x,y矩形左上角坐标
        // // w,h 矩形的宽高
        // can.fillRect(20,20,100,200);
        // can.strokeStyle = "red"; //描边颜色
        // can.lineWidth = "2px"; //描边宽度
        // can.stroke(); //描边

        can.beginPath(); 
        // 画圆
        // 参数:x,y,r,开始角度,结束角度
        // r是半径
        // x,y圆心坐标
        can.arc(100,100,30,0,Math.PI / 2);
        can.strokeStyle = "red"; //描边颜色
        can.lineWidth = "2px"; //描边宽度
        can.stroke(); //描边

    </script>
</body>
</html>